<template>
    <div class="page-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>组合产品审核队列</span>
                </div>
            </template>
            <el-table :data="reviewList" v-loading="loading" style="width: 100%" empty-text="当前没有待审核的组合">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="name" label="组合名称" width="200"></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" width="100"></el-table-column>
                <el-table-column prop="creatorId" label="创建人ID" width="100"></el-table-column>
                <el-table-column prop="strategy" label="策略描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="220" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="info" @click="openDetailDialog(scope.row.id)">查看详情</el-button>
                        <el-button size="small" type="primary" @click="handleApprove(scope.row)">通过</el-button>
                        <el-button size="small" type="danger" @click="handleReject(scope.row)">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

const reviewList = ref([]);
const loading = ref(true);

/**
 * 获取待审核列表。
 */
const fetchReviewList = async () => {
    loading.value = true;
    try {
        // 不再请求 /pending，而是使用查询参数
        const response = await axios.get('/api/combinations', {
            params: {
                status: 'PENDING_APPROVAL'
            }
        });
        reviewList.value = response.data;
    } catch (error) {
        ElMessage.error('获取待审核列表失败: ' + (error.response?.data || error.message));
        reviewList.value = [];
    } finally {
        loading.value = false;
    }
};

/**
 * 处理批准操作。
 */
const handleApprove = async (combination) => {
    try {
        // **核心修改**：调用新的 /approve 接口
        await axios.post(`/api/combinations/${combination.id}/approve`);
        ElMessage.success(`组合 "${combination.name}" 已批准`);
        fetchReviewList(); // 重新加载列表
    } catch (error) {
        ElMessage.error('批准操作失败: ' + (error.response?.data || error.message));
    }
};

/**
 * 处理驳回操作。
 */
const handleReject = (combination) => {
    ElMessageBox.prompt('请输入驳回原因', '驳回组合', {
        confirmButtonText: '确认驳回',
        cancelButtonText: '取消',
        inputValidator: (val) => val ? true : '驳回原因不能为空',
    })
    .then(async ({ value }) => {
        try {
            // **核心修改**：调用新的 /reject 接口，并传递原因
            const rejectPayload = {
                rejectionReason: value
            };
            await axios.post(`/api/combinations/${combination.id}/reject`, rejectPayload);
            ElMessage.info(`组合 "${combination.name}" 已被驳回`);
            fetchReviewList(); // 成功后刷新列表
        } catch (error) {
            ElMessage.error('驳回操作失败: ' + (error.response?.data || error.message));
        }
    })
    .catch(() => {
        ElMessage.info('已取消驳回操作');
    });
};

// 处理查看详情的逻辑 (示例)
const selectedProductId = ref(null);
const detailVisible = ref(false); // 假设你有一个控制详情弹窗的变量
const openDetailDialog = (id) => {
    selectedProductId.value = id;
    detailVisible.value = true;
    // 在这里你可以打开一个新弹窗，弹窗内部根据 product id 去获取完整的产品详情
    console.log(`准备查看ID为 ${id} 的产品详情`);
};

onMounted(fetchReviewList);
</script>

<style scoped>
.page-container { padding: 20px; }
.card-header { font-size: 18px; font-weight: bold; }
</style>